<template>
  <div class="rule-group">
    <div class="group-content" v-if="!hide">
      <div class="header-tip flex">
      <span>薪酬设置流程：【设置工资表模板】→【企业设置】→【设置计薪规则】→【关联薪资组】</span>
      <Icon type="ios-close" size="18" />
    </div>
    <div class="guide-intro">
      <div class="guide-title">使用指南</div>
      <div class="guide-content">
        <div class="guide-item">1、设置企业的工资表模板，即核算时的工资表。设置后，请到“计薪规则”选择“薪资组”，关联模板以及适用人员范围。</div>
        <div class="guide-item">2、薪酬结构即所有工资表项目的汇总，由薪酬结构启用的项目组成工资表模板。如需编辑项目，请点击“编辑薪酬结构”。</div>
        <div class="guide-item">3、如有多个类似的工资表模板，可以在操作栏“复制”对应的工资表。将相同项目复制到新模板后继续编辑，减少重复操作。</div>
      </div>
    </div>

    <div class="query-section flex">
      <div class="left-query-wrap flex-box"></div>
      <Button class="save-btn-green" @click="add">新增薪资组</Button>
    </div>
    <div class="table-section">
      <Table width="100%" :columns="columns" :data="data4"></Table>
      <Nodata desc="暂无数据"></Nodata>
    </div>

    </div>
    <div class="sub-content" v-if="hide">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      vertical: "1",
      current: 0,
      formItem: {
        input: ""
      },
      modal2: false,
      data4: [],
      columns: [
        {
          title: "薪资组名称",
          key: "name"
        },
        {
          title: "工资表模板",
          key: "age"
        },
        {
          title: "月计薪时长",
          key: "province"
        },
        {
          title: "计薪公式",
          key: "city"
        },
        {
          title: "计薪规则",
          key: "city"
        }
      ]
    };
  },
  methods: {
    add() {
      let route = "/payroll/salary/rule/group/add";
      this.$router.push(route);
    }
  },
  computed: {
    date() {
      let a = [];
      for (var i = 1; i <= 31; i++) {
        a.push(i);
      }
      return a;
    },
     hide() {
   
      let route = this.$route.matched;
      let matched = route[route.length - 1].path;
      return  matched.includes("group/add") 

    }
  }
};
</script>
<style lang="scss" scoped src='./index.scss'>
</style>